<template>  
  <div class="fulltable">  
    <div class="full">  

      <div class="tabs">  
        <button @click="selectedTab = 'leaveApproval'" :class="{ active: selectedTab === 'leaveApproval' }">请假审批</button>  
        <button @click="selectedTab = 'noticeApproval'" :class="{ active: selectedTab === 'noticeApproval' }">公告审核</button>  
      </div>  

      <div v-if="selectedTab === 'leaveApproval'">  
        <div class="search-box">  
          <el-select v-model="selectedLeaveStatus" placeholder="请选择请假状态" style="width: 200px; margin-right: 10px;" clearable>  
            <el-option label="紧急" value="紧急"></el-option>  
            <el-option label="正常" value="正常"></el-option>  
            <el-option label="一般" value="一般"></el-option>  
          </el-select>
          <el-input v-model="searchLeaveName" placeholder="搜索申请人" style="width: 200px; margin-right: 10px;" clearable></el-input>    
        </div>  
        <el-table  
          :data="filteredVacationData.slice((currentVacationPage - 1) * pageVacationSize, currentVacationPage * pageVacationSize)"   
          :height="vacationtableHeight"  
          border  
          style="width: 100%;">  
          <el-table-column prop="state" label="状态" width="100"></el-table-column>  
          <el-table-column prop="name" label="申请人" width="100"></el-table-column>  
          <el-table-column prop="type" label="类型" width="100"></el-table-column>  
          <el-table-column prop="starttime" label="开始时间" width="200"></el-table-column>  
          <el-table-column prop="deadline" label="结束时间" width="180"></el-table-column>  
          <el-table-column prop="time" label="申请时间" width="200"></el-table-column>  
          <el-table-column prop="examine" label="审核状态" width="100"></el-table-column>  
          <el-table-column label="操作">  
            <template slot-scope="scope">  
              <el-button type="primary" size="small" @click="viewLeaveItem(scope.row)">审核</el-button>  
            </template>  
          </el-table-column>  
        </el-table>  
        <div class="paging">  
          <el-pagination  
            @size-change="handleLeaveSizeChange"  
            @current-change="handleLeaveCurrentChange"  
            :current-page="currentVacationPage"  
            :page-sizes="[5,10, 20, 40, 60]"  
            :page-size="pageVacationSize"  
            :pager-count="4"  
            layout="total, sizes, prev, pager, next, jumper"  
            :total="filteredVacationData.length">  
          </el-pagination>   
        </div>  
      </div>  
        <el-dialog title="假期申请详情" :visible.sync="showDetailModal" width="50%">  
  <el-form :model="detailVacationItem" label-width="80px">  
    <el-form-item label="申请人">  
      <el-input v-model="detailVacationItem.name" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="状态">  
      <el-input v-model="detailVacationItem.state" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="类型">  
      <el-input v-model="detailVacationItem.type" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="开始时间">  
      <el-input v-model="detailVacationItem.starttime" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="结束时间">  
      <el-input v-model="detailVacationItem.deadline" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="原因">  
      <el-input type="textarea" v-model="detailVacationItem.reason" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="申请时间">  
      <el-input v-model="detailVacationItem.time" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="审核人">  
      <el-input v-model="detailVacationItem.reviewer" disabled></el-input>  
    </el-form-item>  
        <el-form-item label="审核原因">  
      <el-input v-model="detailVacationItem.exreason"></el-input>  
    </el-form-item>  
  </el-form>  
    <span slot="footer" class="dialog-footer">  
      <el-button type="success" @click="approveLeave(detailVacationItem)">通过</el-button>  
      <el-button type="danger" @click="rejectLeave(detailVacationItem)">不通过</el-button>  
    </span>
</el-dialog>

      <div v-if="selectedTab === 'noticeApproval'">  
        <div class="search-box">  
          <el-input v-model="searchNoticeTitle" placeholder="搜索标题" style="width: 200px; margin-right: 10px;" clearable></el-input>  
          <el-select v-model="selectedNoticeStatus" placeholder="筛选状态" clearable style="width: 200px; margin-right: 10px;">  
            <el-option v-for="status in noticeStatusOptions" :key="status.value" :label="status.label" :value="status.value"></el-option>  
          </el-select>  
        </div>  
        <el-table  
          :data="filteredNoticeData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"   
          :height="tableHeight"  
          border  
          style="width: 100%">  
          <el-table-column prop="type" label="类型" width="100"></el-table-column>  
          <el-table-column prop="state" label="状态" width="100"></el-table-column>  
          <el-table-column prop="title" label="标题" width="200"></el-table-column>  
          <el-table-column prop="releasetime" label="发布时间" width="180"></el-table-column>  
          <el-table-column prop="releaseperson" label="发布人" width="140"></el-table-column>  
          <el-table-column prop="dept" label="部门" width="140"></el-table-column>  
          <el-table-column label="操作">  
            <template slot-scope="scope">  
              <el-button type="primary" size="small" @click="viewNoticeItem(scope.row)">审核</el-button>  
            </template>  
          </el-table-column>  
        </el-table>  
        <div class="paging">  
          <el-pagination  
            @size-change="handleSizeChange"  
            @current-change="handleCurrentChange"  
            :current-page="currentPage"  
            :page-sizes="[5, 10, 20, 40, 60]"  
            :page-size="pageSize"  
            :pager-count="4"  
            layout="total, sizes, prev, pager, next, jumper"  
            :total="filteredNoticeData.length">  
          </el-pagination>  
        </div>  
      </div>  
      <el-dialog title="公告详情" :visible.sync="showDetailDialog" width="50%">  
  <el-form :model="detailNoticeItem" label-width="80px">  
    <el-form-item label="类型">  
      <el-input v-model="detailNoticeItem.type" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="状态">  
      <el-input v-model="detailNoticeItem.state" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="标题">  
      <el-input v-model="detailNoticeItem.title" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="描述">  
      <el-input type="textarea" v-model="detailNoticeItem.desc" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="发布时间">  
      <el-input v-model="detailNoticeItem.releasetime" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="发起人">  
      <el-input v-model="detailNoticeItem.releaseperson" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="部门">  
      <el-input v-model="detailNoticeItem.dept" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="接收人">  
      <el-input v-model="detailNoticeItem.recipient" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="审核人">  
      <el-input v-model="detailNoticeItem.reviewer" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="审核状态">  
      <el-input v-model="detailNoticeItem.examine" disabled></el-input>  
    </el-form-item>  
    <el-form-item label="审核原因">  
      <el-input v-model="detailNoticeItem.exReason"></el-input>  
    </el-form-item>  
  </el-form>  
  <span slot="footer" class="dialog-footer">  
    <el-button type="success" @click="approveNotice(detailNoticeItem)">通过</el-button>  
    <el-button type="danger" @click="rejectNotice(detailNoticeItem)">不通过</el-button>  
    <el-button @click="showDetailDialog = false">取 消</el-button>  
  </span>  
</el-dialog>
    </div>  
  </div>  
</template>  

<script>  
import {getVacationList,addVacation,updateTheVacation,getVacationDetailById,getICanApprovedVacations} from '@/api/vacation';
import {getICanApprovedNotices,getNoticeDetailById,updateTheNotice} from '@/api/notice';
import {addLog} from '@/api/log';
export default {
  data(){
     return {  
      logItem:{
              mn:'',
              opn:'',
              res:''
      }, 
      selectedTab: 'leaveApproval', // 默认选中的选项卡  
      selectedType: '', // 选中的任务类型  
      searchTitle: '', // 搜索标题  
      searchPromoter: '', // 搜索发起人  
      searchLeaveName: '', // 搜索请假申请人  
      currentPage: 1, // 当前页码  
      pageSize: 5, // 每页显示的数量  
      currentVacationPage: 1, // 当前页码  
      pageVacationSize: 5, // 每页显示的数量  
      taskTypeOptions: [], // 任务类型选项  
      vacationData: [], // 请假数据  
      maxTableHeight: 700, // 最大高度 600px  
      minTableHeight: 350,
      tableHeight:350,
      vacationtableHeight:350,
      taskTypeOptions: [ // 任务类型选项  
          { label: '公事', value: '公事' },  
          { label: '私事', value: '私事' }
        ],
      selectedLeaveStatus: '', // 选中的请假状态  
      detailVacationItem:{},
      showDetailModal:false,
      selectedTask:{},
      showDetailDialog:false,
      selectedNoticeStatus: '', // 新增：公告状态筛选
      searchNoticeTitle: '', // 新增：公告标题搜索
      noticeStatusOptions: [ // 新增：公告状态选项
        { label: '紧急', value: '紧急' },
        { label: '重要', value: '重要' },
        { label: '一般', value: '一般' }
      ],
      noticeData: [], // 新增：公告数据
      detailNoticeItem: {},
    };  
  },  
  computed: {  
  filteredNoticeData() {
    return this.noticeData.filter(item => {
      const matchesTitle = item.title.includes(this.searchNoticeTitle);
      const matchesStatus = this.selectedNoticeStatus ? item.state === this.selectedNoticeStatus : true;
      return matchesTitle && matchesStatus;
    });
  },
  filteredVacationData() {  
  return this.vacationData.filter(vacation => {  
    const matchesName = vacation.name.includes(this.searchLeaveName);  
    const matchesStatus = this.selectedLeaveStatus ? vacation.state === this.selectedLeaveStatus : true; // 添加状态过滤条件  

    return matchesName && matchesStatus;  
  });  
}  
}  , 
  created(){

    getICanApprovedVacations().then(response=>{
      this.vacationData = response.data
      this.calculateVacationTableHeight() 
      console.log(response.data)
    }).catch(error =>{
      console.log(error)
      this.vacationtableHeight = this.minTableHeight  
    })

    getICanApprovedNotices().then(response=>{
      this.noticeData = response.data
      this.calculateTableHeight() 
      console.log(response.data)
    }).catch(error =>{
      console.log(error)
      this.tableHeight = this.minTableHeight  
    })

  },
  watch:{
    "selectedTab"(){
      this.logItem.mn = "selectedTab";
      if(this.selectedTab === 'leaveApproval'){
      this.logItem.opn = "切换选项卡-请假审批";
    }else{
      this.logItem.opn = "切换选项卡-公告审核";
    }
      this.logItem.res = "true";
      addLog(this.logItem);
    },
  currentPage() {  
    this.calculateTableHeight()  
  },  
  pageSize() {  
    this.calculateTableHeight()  
  },
  currentVacationPage() {  
    this.calculateVacationTableHeight()  
  },  
  pageVacationSize() {  
    this.calculateVacationTableHeight()  
  }
  },
  methods: {  
  calculateTableHeight() {  
  const currentPageData = this.filteredNoticeData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);  
  let height = (currentPageData.length + 1) * 60;  // 每行60px  
  this.tableHeight = Math.max(this.minTableHeight, Math.min(height, this.maxTableHeight));  
},
  calculateVacationTableHeight() {  
    // 获取当前页展示的数据量  
    const currentPageData = this.filteredVacationData.slice((this.currentVacationPage - 1) * this.pageVacationSize, 
                                                                                     this.currentVacationPage * this.pageVacationSize);  
    
    // 每行高度为 50px，再加上表头高度 50px，得到总高度  
    let height = (currentPageData.length + 1) * 60 
    // 限制高度在 minTableHeight 和 maxTableHeight 之间  
    this.vacationtableHeight = Math.max(this.minTableHeight, Math.min(height, this.maxTableHeight))  
  },
    showAddLeaveDialog() {  
      this.showAddLeaveDialog = true;  
    },   
    viewLeaveItem(row) {  
      // 查看请假详情的方法  
    getVacationDetailById(row.id).then((response)=>{
    this.showDetailModal = true; // 显示详情弹窗  
    this.detailVacationItem = response.data;
    console.log(response.data);
  })
    },   
    handleSizeChange(newSize) {  
      this.pageSize = newSize;  
      this.currentPage = 1; // 重置当前页码  
      this.logItem.mn = "handleSizeChange";
      this.logItem.opn = "改变每页显示的待审核信息-公告审核";
      this.logItem.res = "true";
      addLog(this.logItem);
    },  
    handleCurrentChange(newPage) {  
      this.currentPage = newPage; // 更新当前页码  
      this.logItem.mn = "handleCurrentChange";
      this.logItem.opn = "改变页码-公告审核";
      this.logItem.res = "true";
      addLog(this.logItem);
    },  
    handleLeaveSizeChange(newSize) {  
      this.pageVacationSize = newSize;  
      this.currentVacationPage = 1; // 重置当前页码  
      this.logItem.mn = "handleLeaveSizeChange";
      this.logItem.opn = "改变每页显示的待审核信息-请假审批";
      this.logItem.res = "true";
      addLog(this.logItem);
    },  
    handleLeaveCurrentChange(newPage) {  
      this.currentVacationPage = newPage; // 更新当前页码  
      this.logItem.mn = "handleLeaveCurrentChange";
      this.logItem.opn = "改变页码-请假审批";
      this.logItem.res = "true";
      addLog(this.logItem);
    },

  // 请假通过审核  
  approveLeave(vacation) {  
    // 处理通过请求的逻辑  
    console.log('通过申请:', vacation);  
    vacation.examine = 1;  
    vacation.name = vacation.userId;  
    vacation.reviewer = vacation.reviewId;  
    if (vacation.state === "紧急") {  
      vacation.state = 1;  
    } else if (vacation.state === "重要") {  
      vacation.state = 2;  
    } else if (vacation.state === "正常") {  
      vacation.state = 3;  
    }  
    updateTheVacation(vacation).then(response => {  
      this.$message.success('请假审核成功');  
      this.logItem.mn = "approveLeave";
      this.logItem.opn = "通过请假审批";
      this.logItem.res = "true";
      addLog(this.logItem);
      this.refreshLeaveApproval(); // 刷新请假审批  
      this.$emit('updatePendingCounts');
    }).catch(error => {  
      console.log(error);  
      this.logItem.mn = "approveLeave";
      this.logItem.opn = "通过请假审批";
      this.logItem.res = "false";
      addLog(this.logItem);
      this.$message.error('请假审核失败');  
    });  
    this.showDetailModal = false; // 关闭对话框  
  },  
  
  // 请假未通过审核  
  rejectLeave(vacation) {  
    if (!vacation.exreason) {  
      this.$message.error('审核原因不能为空！');  
      return; // 校验不通过，返回  
    }  
    // 处理不通过请求的逻辑  
    console.log('不通过申请:', vacation);  
    vacation.examine = 2;  
    vacation.name = vacation.userId;  
    vacation.reviewer = vacation.reviewId;  
    if (vacation.state === "紧急") {  
      vacation.state = 1;  
    } else if (vacation.state === "重要") {  
      vacation.state = 2;  
    } else if (vacation.state === "正常") {  
      vacation.state = 3;  
    }  
    console.log("不通过的请假信息：", vacation);  
    updateTheVacation(vacation).then(response => {  
      this.$message.success('请假审核成功');  
      this.logItem.mn = "rejectLeave";
      this.logItem.opn = "不通过请假审批";
      this.logItem.res = "true";
      addLog(this.logItem);
      this.refreshLeaveApproval(); // 刷新请假审批  
      this.$emit('updatePendingCounts');
    }).catch(error => {  
      console.log(error);  
      this.logItem.mn = "rejectLeave";
      this.logItem.opn = "不通过请假审批";
      this.logItem.res = "true";
      addLog(this.logItem);
      this.$message.error('请假审核失败');  
    });  
    this.showDetailModal = false; // 关闭对话框  
  },  

  // 刷新请假审批  
  refreshLeaveApproval() {  
    this.selectedTab = 'leaveApproval'; // 切换到请假审批选项卡  
    this.currentVacationPage = 1; // 重置当前页码  
    this.getVacationList(); // 重新获取请假数据  
  },  

  
  // 获取请假列表  
  getVacationList() {  
    getICanApprovedVacations().then(response => {  
      this.vacationData = response.data;  
      this.calculateVacationTableHeight();  
      console.log(response.data);  
    }).catch(error => {  
      console.log(error);  
      this.vacationtableHeight = this.minTableHeight;  
    });  
  },  

  // Notice approval method
  approveNotice(notice) {  
    console.log('通过公告申请:', notice);  
    notice.examine = "1"; // Set examine status to approved
    notice.state = "";
    notice.promoter="";
    notice.deptname="";
    notice.receiverList=[];
    notice.reviewer="";
    updateTheNotice(notice).then(response => {  
      this.$message.success('公告审核成功');  
      this.logItem.mn = "approveNotice";
      this.logItem.opn = "通过公告审批";
      this.logItem.res = "true";
      addLog(this.logItem);
      this.refreshNoticeApproval(); // Refresh notice approval
      this.$emit('updatePendingCounts');
    }).catch(error => {  
      console.log(error);  
      this.logItem.mn = "approveNotice";
      this.logItem.opn = "通过公告审批";
      this.logItem.res = "false";
      addLog(this.logItem);
      this.$message.error('公告审核失败');  
    });  
  },  

  // Notice rejection method
  rejectNotice(notice) {  
    if (!notice.exReason) {  
      this.$message.error('审核原因不能为空！');  
      return; // Validation fails, return
    }  
    console.log('不通过公告申请:', notice);  
    notice.examine = "2"; // Set examine status to rejected
    notice.state = "";
    notice.promoter="";
    notice.deptname="";
    notice.receiverList=[];
    notice.reviewer="";
    updateTheNotice(notice).then(response => {  
      this.$message.success('公告审核成功');  
      this.logItem.mn = "rejectNotice";
      this.logItem.opn = "不通过公告审批";
      this.logItem.res = "true";
      addLog(this.logItem);
      this.refreshNoticeApproval(); // Refresh notice approval
      this.$emit('updatePendingCounts');
    }).catch(error => {  
      console.log(error);
      this.logItem.mn = "rejectNotice";
      this.logItem.opn = "不通过公告审批";
      this.logItem.res = "false";
      addLog(this.logItem);  
      this.$message.error('公告审核失败');  
    });  
  },  

  // Refresh notice approval
  refreshNoticeApproval() {  
    this.showDetailDialog = false;
    this.selectedTab = 'noticeApproval'; // Switch to notice approval tab  
    this.currentPage = 1; // Reset current page number  
    this.getNoticeList(); // Re-fetch notice data  
    
  },  

  // Fetch notice list
  getNoticeList() {  
    getICanApprovedNotices().then(response => {  
      this.noticeData = response.data;  
      this.calculateTableHeight();  
      console.log(response.data);  
    }).catch(error => {  
      console.log(error);  
      this.tableHeight = this.minTableHeight;  
    });  
  },  

  viewNoticeItem(row) {  
    // Fetch notice details and show the dialog
    getNoticeDetailById(row.id).then((response) => {  
        this.detailNoticeItem = response.data;  
        console.log(response.data);  
        this.showDetailDialog = true; // Show the detail dialog
      }).catch(() => {  
        this.$message.info('查看公告消息失败');  
      });  

  },  
  },  
};  
</script> 

<style lang="less" scoped>  
.fulltable {  
  margin-top: 20px;  
  height: 700px;  
}  

.full {  
  height: 800px;  
  margin: 0;  
  padding: 0;  
  background: pink;  
  padding-top: 10px;  
  margin-left: 20px;  
  margin-right: 20px;  
  border-radius: 10px;  
  flex: 1;  
}  

.add {  
  padding: 10px;  
}  

.tabs {  
  margin: 10px 0;  
}  

.tabs button {  
  padding: 10px;  
  margin-right: 5px;  
  border: none;  
  background-color: #fff;  
  cursor: pointer;  
}  

.tabs button.active {  
  background-color: green;  
  color: white;  
}  

.tab-content {  
  margin-top: 20px;  
}  

/deep/.el-table .cell {  
  color: black;  
}  
  /deep/ .el-pagination {
    display: flex;  
    justify-content: flex-end;  
  }

  .dialog-footer {  
  display: flex;  
  justify-content: center; /* 水平居中 */  
  gap: 10px; /* 按钮之间的间距 */  
}
</style>